<template>
  <view class="modal-overlay" v-if="show" @click="handleClose">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <view class="category-info">
          <view class="category-icon" :style="{ backgroundColor: category?.color + '20' }">
            <text class="icon-text">{{ category?.icon || '📁' }}</text>
          </view>
          <view class="category-details">
            <text class="category-name">{{ category?.name }}</text>
            <text class="category-count">{{ category?.diaryCount || 0 }} 篇日记</text>
          </view>
        </view>
      </view>
      
      <view class="modal-actions">
        <view class="action-item" @click="handleEdit">
          <uni-icons type="compose" size="20" color="#1890ff"></uni-icons>
          <text class="action-text">编辑分类</text>
        </view>
        
        <view class="action-item" @click="handleViewDiaries">
          <uni-icons type="eye" size="20" color="#52c41a"></uni-icons>
          <text class="action-text">查看日记</text>
        </view>
        
        <view class="action-item danger" @click="handleDelete">
          <uni-icons type="trash" size="20" color="#ff4d4f"></uni-icons>
          <text class="action-text danger">删除分类</text>
        </view>
      </view>
      
      <view class="modal-footer">
        <button class="cancel-btn" @click="handleClose">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CategoryActionModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    category: {
      type: Object,
      default: null
    }
  },
  emits: ['update:show', 'edit', 'delete', 'viewDiaries'],
  methods: {
    handleClose() {
      this.$emit('update:show', false)
    },
    
    handleEdit() {
      this.$emit('edit', this.category)
    },
    
    handleDelete() {
      this.$emit('delete', this.category)
    },
    
    handleViewDiaries() {
      this.$emit('viewDiaries', this.category)
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
}

.modal-content {
  width: 100%;
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 40rpx 32rpx;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-header {
  margin-bottom: 32rpx;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-text {
  font-size: 32rpx;
}

.category-details {
  flex: 1;
}

.category-name {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8rpx;
}

.category-count {
  font-size: 24rpx;
  color: #999999;
}

.modal-actions {
  margin-bottom: 32rpx;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
}

.action-item:last-child {
  border-bottom: none;
}

.action-item:active {
  background-color: #f8f8f8;
}

.action-text {
  font-size: 28rpx;
  color: #333333;
}

.action-text.danger {
  color: #ff4d4f;
}

.modal-footer {
  padding-top: 32rpx;
  border-top: 1rpx solid #f0f0f0;
}

.cancel-btn {
  width: 100%;
  height: 88rpx;
  background-color: #f8f8f8;
  color: #666666;
  border-radius: 44rpx;
  font-size: 28rpx;
  border: none;
}

.cancel-btn::after {
  border: none;
}
</style> 